<template>
  <div style="width:888px">
    <el-card class="box-card">
      <el-row>
        <el-col :span="5">
          <div class="demo-basic--circle">
            <div class="block">
              <router-link :to="{name: 'User', params: { id: user_id }}">
                <el-avatar :size="150" :src="user_avatar" />
              </router-link>
            </div>

          </div>
        </el-col>
        <el-col :span="3" style="font-size:30px">
          {{ user_username }} <br><br>
          <span v-if="user_isConsultant === 0" style="font-size:18px">普通用户</span>
          <span v-else style="font-size:18px"><i class="iconfont icon-xingxing" style="color: #FF8B70;" />心理咨询师<i class="iconfont icon-xingxing" style="color: #FF8B70;" /></span>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header">
        <span style="font-size:26px;"><strong>基本信息</strong></span>
      </div>
      <!-- 个人信息 -->
      <div>
        <el-row>
          <el-col :span="3">
            <span>用户昵称</span>
          </el-col>
          <el-col :span="3">
            <span />
          </el-col>
          <el-col :span="10">
            <el-col ref="nickname" :span="9">
              <span style="width:30px;height:40px" @mouseenter="open('nickEdit')" @mouseleave="close('nickEdit')"> {{ user_username }} </span>
            </el-col>
            <el-col ref="nickname_edit">
              <el-col :span="10">
                <el-input v-model="input" :value="input" />
              </el-col>
              <el-col :span="10" style="margin-left:20px">
                <el-button type="primary" size="mini" @click="cancel('nickname','nickname_edit')">取消</el-button>
                <el-button type="danger" size="mini" @click="modifyNickname">确定</el-button>
              </el-col>
            </el-col>
            <el-col ref="nickEdit" :span="3" style="display:none">
              <el-link icon="el-icon-edit-outline" @click="visable('nickname','nickname_edit')">编辑</el-link>
            </el-col>
          </el-col>
        </el-row>

        <!-- 下划线 -->
        <el-divider />
        <!-- 性别 -->
        <el-row>
          <el-col :span="3">
            <span>性别</span>
          </el-col>
          <el-col :span="3">
            <span />
          </el-col>
          <el-col :span="10">
            <el-col ref="gender" :span="4">
              <span v-if="user_gender === null" @mouseenter="open('genderEdit')" @mouseleave="close('genderEdit')">未填写</span>
              <span v-else @mouseenter="open('genderEdit')" @mouseleave="close('genderEdit')"> {{ user_gender === 0 ? '男' : '女' }} </span>
            </el-col>
            <el-col ref="gender_edit">
              <el-col :span="10">
                <el-radio v-model="gender" label="0">男</el-radio>
                <el-radio v-model="gender" label="1">女</el-radio>
              </el-col>
              <el-col :span="10" style="margin-left:20px">
                <el-button type="primary" size="mini" @click="cancel('gender','gender_edit')">取消</el-button>
                <el-button type="danger" size="mini" @click="modifyGender">确定</el-button>
              </el-col>
            </el-col>
            <el-col ref="genderEdit" :span="3" style="display:none">
              <el-link icon="el-icon-edit-outline" @click="visable('gender','gender_edit')">编辑</el-link>
            </el-col>
          </el-col>
        </el-row>

        <el-divider />
        <!-- 出生日期 -->
        <el-row>
          <el-col :span="3">
            <span>出生日期</span>
          </el-col>
          <el-col :span="3">
            <span />
          </el-col>
          <el-col :span="14">
            <el-col ref="birthday" :span="9">
              <span v-if="user_birthday" style="width:30px;height:40px" @mouseenter="open('birthdayEdit')" @mouseleave="close('birthdayEdit')"> {{ user_birthday }} </span>
              <span v-else style="width:30px;height:40px;color:#a1afc9" @mouseenter="open('birthdayEdit')" @mouseleave="close('birthdayEdit')"> 未填写 </span>
            </el-col>
            <el-col ref="birthday_edit">
              <el-col :span="10">
                <div class="block">
                  <el-date-picker
                    v-model="birthday"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </div>
              </el-col>
              <el-col :span="12" style="margin-left:20px">
                <el-button type="primary" size="mini" @click="cancel('birthday','birthday_edit')">取消</el-button>
                <el-button type="danger" size="mini" @click="modifyBirthday">确定</el-button>
              </el-col>
            </el-col>
            <el-col ref="birthdayEdit" :span="3" style="display:none">
              <el-link icon="el-icon-edit-outline" @click="visable('birthday','birthday_edit')">编辑</el-link>
            </el-col>
          </el-col>
        </el-row>

        <el-divider />
        <!-- 所在地区 -->
        <el-row>
          <el-col :span="3">
            <span>所在地区</span>
          </el-col>
          <el-col :span="3">
            <span />
          </el-col>
          <el-col :span="14">
            <el-col ref="address" :span="9">
              <span v-if="user_address" style="width:30px;height:40px" @mouseenter="open('addressEdit')" @mouseleave="close('addressEdit')"> {{ user_address }} </span>
              <span v-else style="width:30px;height:40px;color:#a1afc9" @mouseenter="open('addressEdit')" @mouseleave="close('addressEdit')"> 未填写 </span>
            </el-col>
            <el-col ref="address_edit">
              <el-col :span="10">
                <el-cascader
                  v-model="selectedOptions"
                  :options="options"
                  :props="{ expandTrigger: 'hover' }"
                  clearable
                  @change="handleChange"
                />
              </el-col>
              <el-col :span="8" style="margin-left:20px">
                <el-button type="primary" size="mini" @click="cancel('address','address_edit')">取消</el-button>
                <el-button type="danger" size="mini" @click="modifyAddress">确定</el-button>
              </el-col>
            </el-col>
            <el-col ref="addressEdit" :span="3" style="display:none">
              <el-link icon="el-icon-edit-outline" @click="visable('address','address_edit')">编辑</el-link>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { edit } from '@/api/user'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      input: '',
      username: '',
      gender: '',
      birthday: '',
      options: regionData,
      selectedOptions: [],
      address: '',
      upload: 'http:localhost:8081/test/user/upload'
    }
  },
  computed: {
    ...mapGetters([
      'user_avatar',
      'user_username',
      'user_address',
      'user_id',
      'user_gender',
      'user_isConsultant'
    ]),
    user_birthday() {
      if (this.$store.state.user.birthday === null) {
        return null
      } else {
        return this.$store.state.user.birthday.split(' ')[0]
      }
    }
  },
  mounted: function() {
    this.$refs['nickname_edit'].$el.style.display = 'none'
    this.$refs['birthday_edit'].$el.style.display = 'none'
    this.$refs['address_edit'].$el.style.display = 'none'
    this.$refs['gender_edit'].$el.style.display = 'none'
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 显示编辑按钮
    open(data) {
      this.$refs[data].$el.style.display = 'block'
    },
    // 关闭编辑按钮
    close(data) {
      // 延迟编辑按钮消失
      this.timer = setTimeout(() => {
        this.$refs[data].$el.style.display = 'none'
      }, 2000)
    },
    // 显示文本框
    visable(param1, param2) {
      this.$refs[param1].$el.style.display = 'none'
      this.$refs[param2].$el.style.display = 'block'
    },
    cancel(param1, param2) {
      this.$refs[param1].$el.style.display = 'block'
      this.$refs[param2].$el.style.display = 'none'
    },
    modifyNickname() {
      if (this.input === '') {
        this.$message.error('昵称不能为空')
        return
      }
      edit({ id: this.$store.state.user.id, username: this.input }).then((res) => {
        console.log(res)
        if (res.code === 1) {
          this.$store.commit('user/SET_USERNAME', res.data.username)
          this.$refs['nickname'].$el.style.display = 'block'
          this.$refs['nickname_edit'].$el.style.display = 'none'
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    modifyBirthday() {
      if (this.birthday === '') {
        this.$message.error('出生日期不能为空')
        return
      }
      const userId = this.$store.getters.user_id
      edit({ id: userId,
        birthday: this.birthday }).then((res) => {
        this.$store.commit('user/SET_BIRTHDAY', res.data.birthday)
        this.birthday = ''
        this.$refs['birthday'].$el.style.display = 'block'
        this.$refs['birthday_edit'].$el.style.display = 'none'
        console.log(1)
      })
    },
    modifyAddress() {
      const area = CodeToText[this.selectedOptions[0]] + ' ' + CodeToText[this.selectedOptions[1]] + ' ' + CodeToText[this.selectedOptions[2]]
      if (area === '') {
        this.$message.error('所属地区不能为空')
        return
      }
      edit({ id: this.$store.state.user.id, address: area }).then((res) => {
        this.$store.commit('user/SET_ADDRESS', res.data.address)
        this.$refs['address'].$el.style.display = 'block'
        this.$refs['address_edit'].$el.style.display = 'none'
        this.$message({
          message: '修改所在地区成功',
          type: 'success'
        })
      })
    },
    modifyGender() {
      if (this.gender === ' ') {
        this.$message.error('修改信息不能为空')
        return
      }
      edit({ id: this.$store.state.user.id, gender: this.gender }).then((res) => {
        if (res.code === 1) {
          this.$store.commit('user/SET_GENDER', res.data.gender)
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs['gender'].$el.style.display = 'block'
          this.$refs['gender_edit'].$el.style.display = 'none'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card{
    border-radius: 12px;
  }
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

.avatar-uploader .el-upload {
    border: 1px dashed #0f0d0d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  @font-face {
  font-family: "iconfont"; /* Project id 3332477 */
  src: url('//at.alicdn.com/t/font_3332477_5hkw7fjzng.eot?t=1651760627934'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3332477_5hkw7fjzng.eot?t=1651760627934#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_3332477_5hkw7fjzng.woff2?t=1651760627934') format('woff2'),
       url('//at.alicdn.com/t/font_3332477_5hkw7fjzng.woff?t=1651760627934') format('woff'),
       url('//at.alicdn.com/t/font_3332477_5hkw7fjzng.ttf?t=1651760627934') format('truetype'),
       url('//at.alicdn.com/t/font_3332477_5hkw7fjzng.svg?t=1651760627934#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xingxing:before {
  content: "\e870";
}

.icon-jubao:before {
  content: "\e618";
}

.icon-shenqing:before {
  content: "\e675";
}

.icon-yiguanzhu:before {
  content: "\e612";
}

.icon-huifu:before {
  content: "\e655";
}

.icon-jiaguanzhu:before {
  content: "\e60b";
}

.icon-tuijian:before {
  content: "\e6ec";
}

.icon-a-xingbietouxiang:before {
  content: "\e763";
}

.icon-biaoqian:before {
  content: "\e67e";
}

.icon-zhishiwenda:before {
  content: "\e636";
}

.icon-chakan:before {
  content: "\e628";
}

.icon-quxiaoshoucang:before {
  content: "\e8c2";
}

.icon-shoucang:before {
  content: "\e8c3";
}

.icon-exe-my-attention-primary:before {
  content: "\e915";
}

.icon-wodeguanzhu:before {
  content: "\e60c";
}

.icon-dianzan_kuai:before {
  content: "\ec8c";
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}

</style>
